.layout-selector {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    height: 50px;
}

.layout-item {
    position: relative;
    width: 18%;
    height: 45px;
    overflow: hidden;
    cursor: pointer;
    background: #f0f2f5;
    border-radius: 4px;

    &.mix div:nth-child(1),
    &.top div:nth-child(1) {
        width: 100%;
        height: 30%;
        background: #1b2a47;
        box-shadow: 0 0 1px #888;
    }

    &.mix div:nth-child(2) {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 30%;
        height: 70%;
        background: #1b2a47;
        box-shadow: 0 0 1px #888;
    }

    &.left div:nth-child(1) {
        width: 30%;
        height: 100%;
        background: #1b2a47;
    }

    &.left div:nth-child(2) {
        position: absolute;
        top: 0;
        right: 0;
        width: 70%;
        height: 30%;
        background: #fff;
        box-shadow: 0 0 1px #888;
    }
}

.layout-item.is-active {
    border: 2px solid var(--c-primary);
}
